<template>
	<view class="login">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="login-top">
			<img @click="back" src="@/static/img/login_btn_close_n.png" style='width: 14px;height: 14px;' alt="">
		</view>
		<view class="login-box">
			<span>登录</span>
			<view>
				<input type="text" v-model="username" placeholder="请输入用户名">
			</view>
			<view>
				<input type="password" v-model="password" placeholder="请输入密码">
			</view>
			<button @click="login">立即登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				check: '',
				from: ''
			}
		},
		methods: {
			back() {
				uni.reLaunch({
					url: '../main/main',
				});
			},
			login() {
				if (this.username == "") {
					this.$refs.uTips.show({
						title: '用户名不能为空',
						type: 'warning',
						duration: '2300'
					})
					return;
				}
				if (this.password == "") {
					this.$refs.uTips.show({
						title: '密码不能为空',
						type: 'warning',
						duration: '2300'
					})
					return;
				}
				var self = this;
				uni.request({
					url: this.$store.state.ip + 'authorization/oauth/token', //仅为示例，并非真实接口地址。
					data: {
						"grant_type": "password",
						"client_secret": "test_secret",
						"client_id": "test_client",
						"username": self.username,
						"password": self.password
					},
					method: 'POST',
					dataType: 'json',
					header: {
						'Authorization': 'Basic dGVzdF9jbGllbnQ6dGVzdF9zZWNyZXQ=', //自定义请求头信息
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res.data);
							this.$store.commit('login', {
								'username': self.username,
								'token': res.data.data.token,
								'refreshToken': res.data.data.refreshToken
							});
							uni.reLaunch({
								url: '../main/main',
							});
						} else {
							this.$refs.uTips.show({
								title: res.data.data,
								type: 'warning',
								duration: '2300'
							})
						}

					},
					fail: (res) => {
						console.log(res);
					}
				});

			
			},
			
		},
	}
</script>

<style>
	.login {
		width: 100%;
	}

	.login-top {
		background-color: #fff;
		font-size: 16px;
		color: #35374b;
		text-align: center;
		height: 80px;
		line-height: 100px;
	}

	.login-top img {
		position: absolute;
		left: 0px;
		top: 26px;
		padding: 12px;
	}

	.login-top img:active {
		background-color: #eee;
	}

	.login-box {
		margin: 30px 22px 0 22px;
	}

	.login-box span {
		margin-bottom: 34px;
		display: inline-block;
	}

	.login-box div {
		border-bottom: 1px solid #cfcfcf;
	}

	.login-box input {
		outline: none;
		border: none;
		height: 55px;
		line-height: 55px;
		width: 100%;
		font-size: 15px;
		color: #35374B;
	}

	.login-box button {
		width: 100%;
		text-align: center;
		height: 48px;
		line-height: 48px;
		background-color: #1869E0;
		color: #fff;
		border: none;
		margin-top: 25px;
		border-radius: 30px;
		font-size: 16px;
		box-shadow: 0px 5px 5px #aaaaaa;
		outline: none;
	}

	.login-box button:active {
		opacity: 0.8;
	}
</style>
